/*
 * @Author: HuangYue
 * @Date: 2022-05-05 17:30:56
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-07 16:57:17
 * @FilePath: /graduation/src/pages/DataVisualization/Welcome/UserWelcome.jsx
 * @Description: admin欢迎页 图表
 */
import { GridContent } from '@ant-design/pro-layout';
import { EllipsisOutlined } from '@ant-design/icons';
import { Donut } from '@ant-design/charts';
import React, { useState, Suspense } from 'react';
import IntroduceRow from './IntroduceRow';
import SalesCard from './SalesCard';
import TopSearch from './TopSearch';
import { Row, Col, Dropdown, Menu } from 'antd';
import { fakeChartData } from '../../../services/mockApi/dataVisualization';
import { useRequest } from 'umi';
import { getTimeDistance } from './utils/utils';
import ProportionSales from './ProportionSales';
import styles from './Welcome.less';

const Welcome = () => {
  const [salesType, setSalesType] = useState('all');
  const [rangePickerValue, setRangePickerValue] = useState(getTimeDistance('year'));
  const { loading, data } = useRequest(fakeChartData);
  let salesPieData;

  if (salesType === 'all') {
    salesPieData = data?.salesTypeData;
  } else {
    salesPieData = salesType === 'online' ? data?.salesTypeDataOnline : data?.salesTypeDataOffline;
  }
  const menu = (
    <Menu>
      <Menu.Item>操作一</Menu.Item>
      <Menu.Item>操作二</Menu.Item>
    </Menu>
  );
  const dropdownGroup = (
    <span className={styles.iconGroup}>
      <Dropdown overlay={menu} placement="bottomRight">
        <EllipsisOutlined />
      </Dropdown>
    </span>
  );
  const selectDate = (type) => {
    setRangePickerValue(getTimeDistance(type));
  };

  const handleRangePickerChange = (value) => {
    setRangePickerValue(value);
  };
  const handleChangeSalesType = (e) => {
    setSalesType(e.target.value);
  };
  const isActive = (type) => {
    if (!rangePickerValue) {
      return '';
    }

    const value = getTimeDistance(type);

    if (!value) {
      return '';
    }

    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }

    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }

    return '';
  };
  return (
    <GridContent>
      <>
        <Suspense fallback={null}>
          <IntroduceRow loading={loading} visitData={[]} />
        </Suspense>
        <Suspense fallback={null}>
          <SalesCard
            rangePickerValue={rangePickerValue}
            salesData={data?.salesData || []}
            isActive={isActive}
            handleRangePickerChange={handleRangePickerChange}
            loading={loading}
            selectDate={selectDate}
          />
        </Suspense>
        <Row
          gutter={24}
          style={{
            marginTop: 24,
          }}
        >
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Suspense fallback={null}>
              <TopSearch
                loading={loading}
                visitData2={data?.visitData2 || []}
                searchData={data?.searchData || []}
                dropdownGroup={dropdownGroup}
              />
            </Suspense>
          </Col>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Suspense fallback={null}>
              <ProportionSales
                dropdownGroup={dropdownGroup}
                salesType={salesType}
                loading={loading}
                salesPieData={salesPieData || []}
                handleChangeSalesType={handleChangeSalesType}
              />
            </Suspense>
          </Col>
        </Row>
      </>
    </GridContent>
  );
};

export default Welcome;
